<template>
    <div class="user-details">
        <!--<div  v-if="isShowSlider">-->
            <!--<div style="line-height: 40px;">司机位置:</div>-->
            <!--<vue-slider :lazy="true"  v-bind="driverTime.obj" v-model="driverTime.obj.value" style="padding: 17px 10px 0 16px;width: 100%"></vue-slider>-->
        <!--</div>-->
        <driver-trajectory-map  :map-height="'640px'" :driver-list-data="driverDetail" :marker-location="markerLocation" :driver-task="driverTask" :driver-task-over="driverTaskOver"></driver-trajectory-map>
    </div>
</template>
<script>
    import vueSlider from 'vue-slider-component';
    import DriverTrajectoryMap from '../map/driverGuiJi/map-guiji.vue'
    export default {
        name: 'DriverTrajectory',
        components: {
            DriverTrajectoryMap,
            vueSlider
        },
        props: {
            driverDetail: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driverTaskOver: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driverTask: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                isShowSlider: false,
                markerLocation: [],
                driverTime: {
                    obj: {
                        value: '2016-10-01',
                        width: '90%',
                        tooltip: 'always',
                        disabled: false,
                        piecewise: true,
                        piecewiseLabel: true,

                        data: [
                            '2016-10-01 00:00:00'
                        ],
                        piecewiseStyle: {
                            "backgroundColor": "#ccc",
                            "visibility": "visible",
                            "width": "12px",
                            "height": "12px"
                        },
                        piecewiseActiveStyle: {
                            "backgroundColor": "#3498db"
                        },
                        labelActiveStyle: {
                            "color": "#3498db"
                        }
                    }
                }

            }
        },
        // watch:{
        //     driverTime: {
        //       handler(val) {
        //           this.driverDetail.forEach(item => {
        //              if (val.obj.value == item.created_at) {
        //                  this.markerLocation = [item.lon, item.lat];
        //              }
        //           });
        //       },
        //         deep:true
        //     },
        //     driverDetail: {
        //         handler(val) {
        //             let self = this;
        //             self.driverTime.obj.data = [];
        //             self.driverTime.obj.value = '';
        //             if (val && val.length > 0) {
        //                 self.isShowSlider = true;
        //                 val.forEach(item => {
        //                     self.driverTime.obj.data.push(item.created_at);
        //                 });
        //                 self.driverTime.obj.value = self.driverTime.obj.data?self.driverTime.obj.data[0]:'';
        //             } else {
        //                 self.isShowSlider = false;
        //             }
        //         },
        //         deep: true
        //     }
        // },

        methods: {
    //         setSort(val) {
    //             let driverTrackN = val.sort(function (a, b) {
    //                 let a_date = new Date(a.created_at).getTime();
    //                 let b_date = new Date(b.created_at).getTime();
    //                 return b_date - a_date;
    //
    //             });
    //             return driverTrackN;
    //
    // },
    //         setDriverTime(val) {
    //             let self = this;
    //             val.forEach(item => {
    //                 self.driverTime.obj.data.push(item.created_at);
    //             });
    //             self.driverTime.obj.data;
    //             self.driverTime.obj.value = self.driverTime.obj.data?self.driverTime.obj.data[0]:'';
    //
    //         }
        }
    }
</script>


<style lang="less">
    .user-details{
        .vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,
        .vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{
            display: none !important;
        }
    }
</style>

